<template>
  <div class="control flex flex-col items-center">
    <div class="flex items-center">
      <!-- 上一首 -->
      <Prev
          :mobile-style="mobileOtherStyle"
          :active-btn-style="activeBtnStyle"
          @prev="prev"
      />
      <!-- 后退5s -->
      <Backward
          :mobile-style="mobileOtherStyle"
          :active-btn-style="activeBtnStyle"
          @backward="backward"
      />
      <!-- 播放暂停 -->
      <StartStop
          :mobile-style="mobileStartStopStyle"
          :active-btn-style="activeBtnStyle"
          :is-paused="store.audioOptions.isPaused"
          @startStop="startStop"
      />
      <!-- 前进5s -->
      <Forward
          :mobile-style="mobileOtherStyle"
          :active-btn-style="activeBtnStyle"
          @forward="forward"
      />
      <!-- 下一首 -->
      <Next
          :mobile-style="mobileOtherStyle"
          :active-btn-style="activeBtnStyle"
          @next="next"
      />
      <span
          class="inline-block i-mdi-playlist-music"
          :class="mobileOtherStyle"
          @click="startPlayerList"
      />
    </div>
    <div class="box-border w-full p-2 flex items-center">
      <span class="text-white mr-1">{{ store.audioOptions.currentlyPlaying }}</span>
      <Slider
          :play-progress-bar="store.audioOptions.playProgressBar"
          :progress-bar-max="store.audioOptions.progressBarMax"
          @onChange="onChange"
          @dragStart="dragStart"
      />
      <span class="text-white ml-1">{{ store.audioOptions.totalPlayTime }}</span>
    </div>
    <player-list ref="playerList" :player-list="store.playlistInfo" @specifyPlay="specifyPlay" class="player-list"/>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index"
import {reactive, toRefs, ref} from "vue"

// 播放器进度条
import Slider from '@/components/Myplayer/components/Slider/index.vue'
// 播放暂停
import StartStop from '@/components/Myplayer/components/StartStop/index.vue'
// 上一首
import Prev from '@/components/Myplayer/components/Prev/index.vue'
// 下一首
import Next from '@/components/Myplayer/components/Next/index.vue'
// 后退5s
import Backward from '@/components/Myplayer/components/Backward/index.vue'
// 前进5s
import Forward from '@/components/Myplayer/components/Forward/index.vue'
// 列表
import PlayerList from '@/components/Myplayer/components/PlayerList/index.vue'

/**
 *@params：
 *@desc：
 *     1.需要获取播放列表
 *     2.需要获取歌词
 *     3.获取歌曲信息
 *@author：羽
 *@date 2022/08/09 10:58:06
 */
const store = useStore()
const playerStyle = reactive({
  activeBtnStyle: ['transition cursor-pointer  hover:text-white mr-1 ml-1 '],
  mobileStartStopStyle: 'text-5xl',
  mobileOtherStyle: 'text-3xl'
})

// 前进5s
const forward = () => {
  store.playerInstance.forward()
}
// 后退5s
const backward = () => {
  store.playerInstance.backward()
}

// 下一首
const next = () => {
  store.playerInstance.next()
}

// 上一首
const prev = () => {
  store.playerInstance.prev()
}

// 播放暂停
const startStop = () => {
  store.playerInstance.startStop()
}
// 拖动滚动条
const onChange = (value) => {
  store.playerInstance.onChange(value)
}
// // 开始拖拽时触发
const dragStart = () => {
  store.playerInstance.dragStart()
}
// 设置播放哪首
const specifyPlay = (index) => {
  store.songUrlIndex = index
  store.playerInstance.playLoad()
}

// 播放列表实例
const playerList = ref(null)

// 打开音乐播放列表
const startPlayerList = () => {
  playerList.value.closeORStart()
}


const { activeBtnStyle, mobileStartStopStyle, mobileOtherStyle } = toRefs(playerStyle)

</script>
<style scoped lang="scss">
.player-list {
  position: absolute;
  bottom: 0;
}
</style>
